import React, { Component } from 'react';
import axios from 'axios';
import './Submission.scss';

export default class Submission extends Component {

    constructor(props) {
        super(props);
        this.state = {
            city: []
        }
    }

    handleChange(e) {
        let actprovince = e.target.value;
        axios.get(`/sse`).then(res => {
                let city = res.data[actprovince];
                this.setState({
                    city: city
                })
            })
    }

    render() {
        return(
            <div className="measurement_msg">
                <h3>已有<span>7854</span>人申请</h3>
                <form action="">
                    <div className="measurement_msg_name pr"><input type="text" placeholder="请输入您的姓名" /></div>
                    <div className="measurement_msg_phone pr"><input type="text" placeholder="请输入您的联系电话" /></div>
                    <div className="measurement_msg_region">
                        <select className="measurement_msg_province" onChange={this.handleChange.bind(this)}>
                            <option value="1">省份</option>
                            <option value="广东省">广东省</option>
                            <option value="四川省">四川省</option>
                        </select>
                        <select className="measurement_msg_city">
                            <option value="1">城市</option>
                            {this.state.city && this.state.city.map((item, key) =>
                                <option value={item} key={key}>{item}</option>
                            )}
                        </select>
                    </div>
                    <input type="button" className="measurement_msg_btn" value="免费预约量尺" />
                </form>
            </div>
        )
    }
}